<script setup lang="ts">
import { watchEffect, ref } from 'vue'
const props = defineProps(['data'])
const colorList = [
  '#10FB7F',
  '#00EEED',
  '#FBC610',
  '#F67106',
  '#D93C47',
  '#448ACA',
  '#f6b56a',
  '#2fe1ca',
  '#fe6b53'
]
const boxRef = ref()
const woWidth = ref()
watchEffect(() => {
  const boxWidth = boxRef.value?.offsetWidth
  woWidth.value = boxWidth / props.data.length
})
</script>
<template>
  <div ref="boxRef" class="col col-1 flex justify-between">
    <div
      class="item"
      :style="{ width: `calc(100% / ${data.length})` }"
      v-for="(item, index) in data"
      :key="index"
    >
      <p class="label text-center">{{ item.label }}</p>
      <p v-if="item.key == 'WO'" class="value text-center" :style="{ color: colorList[index] }">
        <DynamicText :text="item.value" :containerWidth="woWidth" />
      </p>
      <p v-else class="value text-center" :style="{ color: colorList[index] }">{{ item.value }}</p>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import url('../../../style/reset.less');
.row-1 {
  .col {
    height: 140px;
    .item {
      background: url(../../../assets/smt-header-box-bg.png) no-repeat;
      background-size: 100% 100%;
      .label {
        width: 100%;
        height: 50px;
        color: #00f2f1;
        font-size: 28px;
        line-height: 52px;
      }
      .value {
        width: 100%;
        height: 90px;
        font-size: 46px;
        line-height: 90px;
      }
    }
  }
  .col-1 {
    width: 100%;
  }
}
</style>
